<template>
  <div class="root">

    <div class="left">

      <el-form-item label="类型：" prop="resource" class="radio">
        <el-radio-group label="类型：" v-model="radio" @change="radio2">
          <el-radio :label="1">外来人员</el-radio>
          <el-radio :label="2">老师</el-radio>
          <el-radio :label="3">学生</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form label-width="100px" :model="parameter" class="demo-ruleForm">

        <el-form-item label="访客名称" prop="username" :rules="[
          { required: true, message: '请输入访客名称' },
          { type: 'string', message: '请输入访客名称' },
        ]">
          <el-input v-model="parameter.username" placeholder="请输入访客名称" type="text" autocomplete="off" />
        </el-form-item>

        <el-form-item label="手机号" prop="mobile" :rules="[
          { required: true, message: '请输入手机号' },
          { type: 'number', message: '请输入手机号' },
        ]">
          <el-input v-model.number="parameter.mobile" placeholder="请输入手机号" type="text" autocomplete="off" />
        </el-form-item>

        <el-form-item label="openid" prop="openid">
          <el-input v-model.number="parameter.openid" placeholder="请输入openid" type="text" autocomplete="off" />
        </el-form-item>

        <el-form-item label="身份证号" prop="card" :rules="[
          { required: true, message: '请输入身份证号' },
          { type: 'number', message: '请输入身份证号' },
        ]">
          <el-input v-model.number="parameter.card" placeholder="请输入身份证号" type="text" autocomplete="off" />
        </el-form-item>

        <el-form-item label="车牌号" prop="carnumber">
          <el-input v-model.string="parameter.carnumber" placeholder="请输入车牌号" type="text" autocomplete="off" />
        </el-form-item>

        <el-form-item label="理由" prop="reason" :rules="[
          { required: true, message: '请输入理由' },
          { type: 'string', message: '请输入理由' },
        ]">
          <el-input v-model.string="parameter.reason" placeholder="请输入理由" type="text" autocomplete="off" />
        </el-form-item>

        <el-form-item label="部门" prop="department" :rules="[
          { required: true, message: '请选择部门' },
          { type: 'string[]', message: '请选择部门' },
        ]">
          <el-cascader v-model="parentId" :emitPath="false" class="cascader" :props="optprops" :options="options2"
            placeholder="请选择部门" clearable />
        </el-form-item>

        <el-form-item label="进校时间" prop="starttime" :rules="[
          { required: true, message: '请选择进校时间' },
          { type: 'string', message: '请选择进校时间' },
        ]">
          <div class="demo-date-picker">
            <div class="block">
              <el-date-picker v-model="parameter.starttime" type="datetime" placeholder="进校时间"
                format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" clearable />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="离校时间" prop="endtime" :rules="[
          { required: true, message: '请选择离校时间' },
          { type: 'string', message: '请选择离校时间' },
        ]">
          <div class="demo-date-picker">
            <div class="block">
              <el-date-picker v-model="parameter.endtime" type="datetime" placeholder="请选择离校时间"
                format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" clearable />
            </div>
          </div>
        </el-form-item>

        <el-form-item label="高风险地区" prop="resource">
          <el-radio-group v-model="parameter.is_go_danger">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="接触过高风险" prop="resource">
          <el-radio-group v-model="parameter.is_contact_danger">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否离京" prop="resource">
          <el-radio-group v-model="parameter.is_leave">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="健康状态" prop="resource">
          <el-radio-group v-model="parameter.is_health">
            <el-radio :label="1">良好</el-radio>
            <el-radio :label="2">一般</el-radio>
            <el-radio :label="3">差</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>

    </div>


    <div class="right">

      <div class="top">

        <!-- 行程码 -->
        <el-form-item label="行程码：" :rules="[
          { required: true, message: '请上传行程码' },
          { type: 'string', message: '请上传行程码' },
        ]">
          <el-upload 
          class="avatar-uploader" 
          action="http://121.42.230.80/api/mini/upload" 
          :show-file-list="false"
          :on-success="handleAvatarSuccess" 
          :before-upload="beforeAvatarUpload"
          >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
        </el-form-item>


        <!-- 疫苗 -->
        <el-form-item label="疫苗：" :rules="[
          { required: true, message: '请上传疫苗' },
          { type: 'string', message: '请上传疫苗' },
        ]" style="margin-left:20px">
          <el-upload 
            class="avatar-uploader" 
            action="http://121.42.230.80/api/mini/upload" 
            :show-file-list="false"
            :on-success="handleAvatarSuccess2" 
            :before-upload="beforeAvatarUpload2"
            >
            <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>

      </div>


      <div class="top">

        <!-- 健康码 -->
        <el-form-item label="健康码：" :rules="[
          { required: true, message: '请上传健康码' },
          { type: 'string', message: '请上传健康码' },
        ]">
          <el-upload 
          class="avatar-uploader" 
          action="http://121.42.230.80/api/mini/upload" 
          :show-file-list="false"
          :on-success="handleAvatarSuccess3" 
          :before-upload="beforeAvatarUpload3"
          >
          <img v-if="imageUrl3" :src="imageUrl3" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
        </el-form-item>

        <!-- 核酸 -->
        <el-form-item label="核酸：" :rules="[
          { required: true, message: '请上传核酸' },
          { type: 'string', message: '请上传核酸' },
        ]" style="margin-left:20px">
          <el-upload 
            class="avatar-uploader" 
            action="http://121.42.230.80/api/mini/upload" 
            :show-file-list="false"
            :on-success="handleAvatarSuccess4" 
            :before-upload="beforeAvatarUpload4"
            >
            <img v-if="imageUrl4" :src="imageUrl4" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>

      </div>

      <el-form-item style="margin-left: 244px; margin-top: 262px;">
        <el-button @click="quxiao">取消</el-button>
        <el-button type="primary" @click="gitAdd">确定</el-button>
      </el-form-item>

    </div>

  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { departmentList,visitAdd } from "../../api/visituser";
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import router from "../../router/router";

const radio = ref(1) //默认按钮
console.log(radio.value);
let radio2 = (a: any) => {
  console.log(a);
  parameter.type = a //老师类型
}


// const radio1 = ref(1) //默认按钮

// const radio3 = ref(1) //默认按钮

// const radio4 = ref(1) //默认按钮

// const radio5 = ref(1) //默认按钮


// 三级联动
let parentId = ref('')  //当前选中的
console.log(parentId);


let optprops = {
  value: 'name',
  label: 'name',
  children: 'son'
}

const options2 = ref([])

let options3 = async () => {
  let res = await departmentList()
  // console.log(res);
  options2.value = res.data
}
options3()

// 上传图片 行程码
const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!) //临时路径
  console.log(response); //真实路径
  parameter.travelcode = response.data //赋值
}
// 图片的验证
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('头像图片必须是 JPG 格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像大小不能超过 2MB!')
    return false
  }
  return true
}


// 上传图片 疫苗
const imageUrl2 = ref('')

const handleAvatarSuccess2: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl2.value = URL.createObjectURL(uploadFile.raw!) //临时路径
  console.log(response); //真实路径
  parameter.vaccination = response.data //赋值
}
// 图片的验证
const beforeAvatarUpload2: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('头像图片必须是 JPG 格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像大小不能超过 2MB!')
    return false
  }
  return true
}


// 上传图片 健康码
const imageUrl3 = ref('')

const handleAvatarSuccess3: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl3.value = URL.createObjectURL(uploadFile.raw!) //临时路径
  console.log(response); //真实路径
  parameter.healthcode = response.data //赋值
}
// 图片的验证
const beforeAvatarUpload3: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('头像图片必须是 JPG 格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像大小不能超过 2MB!')
    return false
  }
  return true
}


// 上传图片 核酸
const imageUrl4 = ref('')

const handleAvatarSuccess4: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl4.value = URL.createObjectURL(uploadFile.raw!) //临时路径
  console.log(response); //真实路径
  parameter.nucleicacid = response.data //赋值
}
// 图片的验证
const beforeAvatarUpload4: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('头像图片必须是 JPG 格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像大小不能超过 2MB!')
    return false
  }
  return true
}


// 点击取消 清空表单数据
let quxiao =() =>{
  window.location.reload()
}


let parameter: any = reactive({  //参数
  address: '山东省 菏泽市 曹县',
  adduserid: 450,
  card: '',
  carnumber: '鲁R•QU889',
  department: null,
  endtime: '',
  healthcode: '',//健康码
  is_contact_danger: null,
  is_go_danger: null,
  is_health: null,
  is_leave: null,
  mobile: '',
  nucleicacid: '',//核酸
  openid: '1',
  reason: '暂无',
  starttime: '',
  travelcode: '',//行程码
  type: null,
  username: '',
  vaccination: ''//疫苗
})
console.log(parameter);

// 添加
let gitAdd = async()=>{
  parameter.department = parentId.value[parentId.value.length -1 ] //截取到最后一个值
  console.log(parameter);
  let res:any = await visitAdd(parameter)
  console.log(res);
  if(res.code==='00000'){
    ElMessage({
      message: "添加成功",
      type: "success",
    });
    router.push('drag-table')
  }else{
    ElMessage({
      message: "添加失败",
      type: "success",
    });
  }
}


</script>

<style scoped lang='less'>
.root {
  display: flex;
}

.radio {
  margin-left: 28px;
}

.left {
  width: 358px;
  margin-right: 100px;
}

.button {
  text-align: center;
}

.upload-demo {
  width: 500px;
}

.avatar-uploader {
  border: 1px dashed #ccc !important;
  border-radius: 10px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.top{
  display: flex;
}

</style>